<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <style type="text/css"> 
        body { 
            margin: 10px; 
        }
		canvas{
			background-color:cornflowerblue;
		}		
    </style> 
    <script type="text/javascript"> 
        var canvas; 
        var context; 
        var isWhite = true;
        var isWell = false;
        var img_b = new Image(); 
        img_b.src = "b.png";
        var img_w = new Image(); 
        img_w.src = "w.png";
  
        var chessData = new Array(15);
        for (var x = 0; x < 15; x++) { 
            chessData[x] = new Array(15); 
            for (var y = 0; y < 15; y++) { 
                chessData[x][y] = 0; 
            } 
        } 
  
        function drawRect() {
            canvas = document.getElementById("canvas"); 
            context = canvas.getContext("2d"); 
  
            for (var i = 0; i <= 640; i += 40) {
                context.beginPath(); 
                context.moveTo(0, i); 
                context.lineTo(640, i); 
                context.closePath(); 
                context.stroke(); 
  
                context.beginPath(); 
                context.moveTo(i, 0); 
                context.lineTo(i, 640); 
                context.closePath(); 
                context.stroke(); 
            } 
        } 
        function play(e) {
            var x = parseInt((e.clientX - 20) / 40);
            var y = parseInt((e.clientY - 20) / 40); 
            if (isWhite) { 
                isWhite = false; 
                drawChess(1, x, y); 
            } 
            else { 
                isWhite = true; 
                drawChess(2, x, y); 
            } 
  
        } 
        function drawChess(chess, x, y) {
           
            if (x >= 0 && x < 15 && y >= 0 && y < 15) { 
                if (chess == 1) { 
                    context.drawImage(img_w, x * 40 + 20, y * 40 + 20);
                    chessData[x][y] = 1; 
                } 
                else { 
                    context.drawImage(img_b, x * 40 + 20, y * 40 + 20); 
                    chessData[x][y] = 2; 
                } 
                judge(x, y, chess); 
            } 
        } 
        
    </script> 
</head> 
<body onload="drawRect()"> 
    <div> 
        <canvas width="640" id="canvas" onmousedown="play(event)" height="640">
        </canvas> 
    </div> 
  
</body> 
</html> 